<!--
 * @Author: luojiajun
 * @Email: company.kachun@gmail.com
 * @Date: 2021-06-29 17:38:12
 * @FilePath: /src/views/dataManagement/system/user/components/UserRulesApi.vue
 * @LastEditTime: 2021-07-05 13:05:32
 * @LastEditors: luojiajun
-->
<template>
    <div class="user-rules-api">
        <el-row>
            <el-col :span="24">
                <el-form :inline="true" :model="ruleForm" ref="ruleForm">
                    <el-form-item label="接口名称" prop="apiName">
                        <el-input
                            placeholder="请输入URL或名称搜索"
                            v-model.trim="ruleForm.apiName"
                            clearable
                        ></el-input>
                    </el-form-item>
                    <el-form-item label="分类" prop="type">
                        <el-select v-model="ruleForm.groupId">
							<el-option v-for="item in groupList" :label="item.name" :value="item.id" :key="item.id"></el-option>
						</el-select>
                    </el-form-item>
                    <el-button
                        type="primary"
                        icon="el-icon-search"
                        :disabled="!userId"
                        @click="fetchData"
                        >查询
                    </el-button>
                    <el-button :disabled="!userId" @click="dialogVisible = true"
                        >编辑接口权限
                    </el-button>
                </el-form>
            </el-col>
        </el-row>
        <el-row>
            <el-col>
                <div class="user-rules-api-table">
                    <el-table
                        v-loading="loading"
                        :data="inputValue"
                        :max-height="mapHeight"
                        border
                    >
                        <el-table-column
                            type="index"
                            label="序号"
                            width="50"
                        ></el-table-column>
                        <el-table-column
                            label="URL地址"
                            align="center"
                            key="pubPath"
                            prop="pubPath"
                            show-overflow-tooltip
                        ></el-table-column>
                        <el-table-column
                            label="接口英文名称"
                            align="center"
                            key="apiEName"
                            prop="apiEName"
                            show-overflow-tooltip
                        ></el-table-column>
                        <el-table-column
                            label="接口名称"
                            align="center"
                            key="apiName"
                            prop="apiName"
                            show-overflow-tooltip
                        ></el-table-column>
                        <el-table-column
                            label="接口版本号"
                            align="center"
                            key="apiVersion"
                            prop="apiVersion"
                        ></el-table-column>
                        <el-table-column
                            label="所属分类"
                            align="center"
                            key="groupName"
                            prop="groupName"
                            show-overflow-tooltip
                        ></el-table-column>
                        <el-table-column
                            label="创建人"
                            align="center"
                            key="creator"
                            prop="creator"
                            show-overflow-tooltip
                        ></el-table-column>
                        <el-table-column
                            label="创建时间"
                            align="center"
                            key="createTime"
                            prop="createTime"
                            show-overflow-tooltip
                        ></el-table-column>
                        <el-table-column
                            label="管理权限"
                            align="center"
                            key="isManage"
                            prop="isManage"
                        >
                            <template slot-scope="scope">
                                <i
                                    :class="
                                        generateSelectedIcon(scope.row.isManage)
                                    "
                                ></i> </template
                        ></el-table-column>
                        <el-table-column
                            label="订阅"
                            align="center"
                            key="isSubscribe"
                            prop="isSubscribe"
                        >
                            <template slot-scope="scope">
                                <i
                                    :class="
                                        generateSelectedIcon(
                                            scope.row.isSubscribe
                                        )
                                    "
                                ></i>
                            </template>
                        </el-table-column>
                    </el-table>
                    <pagination
                        v-show="totalNum > 0"
                        :total="totalNum"
                        :page.sync="ruleForm.pageNum"
                        :limit.sync="ruleForm.pageSize"
                        @pagination="fetchData"
                    ></pagination>
                </div>
            </el-col>
        </el-row>
        <user-rules-api-modal v-model="dialogVisible" :user-id="userId" @success="fetchData"></user-rules-api-modal>
    </div>
</template>

<script>
import { getHeight } from "@/utils/zkComm";
import UserRulesApiModal from "@/views/dataManagement/system/user/components/UserRulesApiModal";
import { getApiRoleList, getUserApiGroup } from "@/api/dataManagement/system/user";

export default {
    name: "UserRulesApi",
    components: {
        UserRulesApiModal
    },
    model: {
        prop: "value",
        event: "change"
    },
    props: {
        value: {
            type: Array,
            default: () => {
                return [];
            }
        },
        userId: {
            type: String,
            default: ''
        }
    },
    computed: {
        inputValue: {
            get() {
                return this.value;
            },
            set(newValue) {
                this.$emit("change", newValue);
            }
        }
    },
    data() {
        return {
            loading: false,
            ruleForm: {
                pageNum: 1,
                pageSize: 30,
                apiName: "",
                groupId: ""
            },
            totalNum: 0,
            mapHeight: undefined,
            dialogVisible: false,
            groupList: []
        };
    },
    created() {
        this.getUserApiGroup()
        this.fetchData();
    },
    activated() {
        this.fetchData();
    },
    mounted() {
        this.mapHeight = getHeight(true);
    },
    methods: {
        generateSelectedIcon(value) {
            return `el-icon-${value > 0 ? "check" : "close"}`;
        },
        // 获取分组列表
        getUserApiGroup() {
            getUserApiGroup().then(res => {
                if (res.code === 200) {
                    this.groupList = res.data
                }
            })
        },
        fetchData() {
            if (this.loading || !this.userId) return

            this.loading = true;

            let params = {
                apiName: this.ruleForm.apiName,
                groupId: this.ruleForm.groupId,
                userId: this.userId,
                pageNum: this.ruleForm.pageNum,
                pageSize: this.ruleForm.pageSize,
            }
            
            getApiRoleList(params)
                .then(res => {
                    if (res.code === 200) {
                        this.inputValue = res.data.records
                        this.totalNum = res.data.total;
                    }
                    this.loading = false;
                })
                .catch(() => {
                    this.loading = false;
                });
        },
    }
};
</script>

<style lang="scss" scoped>
.user-rules-api {
    padding: 10px 0;

    &-table {
        ::v-deep {
            .el-table__row td {
                height: 40px;
            }
        }
    }
}
</style>
